<template>
  <view style="min-height: 100vh;max-height: 100%;background: #eefaf6">
    <view style="display: flex;justify-content: center;padding: 8px;background: #fff">
      <view  @click="tab=0" :class="tab==0?'active':''" style="width: 30%;text-align: center">我的
      <view v-if="tab==0" style="margin: 3px auto;height: 3px;width: 20px;background: #1a9d48;"></view>
      </view>
      <view  @click="tab=1" :class="tab==1?'active':''" style="width: 30%;text-align: center">阅读任务中心
        <view v-if="tab==1" style="margin:3px auto;height: 3px;width: 20px;background: #1a9d48"></view>
      </view>
    </view>

    <view v-if="tab==0">
      <view style="text-align: center;margin-top: 25vh">
        <img style="width: 60%;" src="static/empty.png">
        <view style="text-align: center;color: #b9b9b9">暂无任务</view>
      </view>

    </view>
    <view v-if="tab==1">

      <view>
        <view style="padding: 12px 18px;border-radius: 8px;background: #fff;margin:32px 12px;">
          <view style="position: relative;top: -30px;left: -20px;background: #59d2ad;color: #fff;width: 160px;
          text-align: center;padding: 8px 12px;border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;font-size: 18px">体验阅读任务</view>
        <view style="display: flex;justify-content: center;align-items: center">
          <view style="color: #13ad84;background: #b2f1de;border-radius: 4px;box-shadow: inset 0 0 10px rgba(222,165,56,0.56);width: 70px;text-align: center;padding: 4px">
            <view style="font-size: 18px">30</view>
            <view style="font-size: 14px">周期</view>
          </view>
          <view style="height: 2px;width: 40px;background: #b2f1de"></view>
          <view style="color: #13ad84;background: #b2f1de;border-radius: 4px;box-shadow: inset 0 0 10px rgba(222, 165, 56, 0.7);width: 70px;text-align: center;padding: 4px">
            <view style="font-size: 18px">1</view>
            <view style="font-size: 14px">阅读值</view>
          </view>
          <view style="height: 2px;width: 40px;background: #b2f1de"></view>
          <view style="color: #13ad84;background: #b2f1de;border-radius: 4px;box-shadow: inset 0 0 10px rgba(222, 165, 56, 0.7);width: 70px;text-align: center;padding: 4px">
            <view style="font-size: 18px">10</view>
            <view style="font-size: 14px">最大持有</view>
          </view>
        </view>
        <view style="display: flex;justify-content: space-between;margin-top: 15px">
          <view style="color: #13ad84;font-size: 18px">●领取任务需要</view>
          <view style="color: #dc7e13;background: #ffeed6;padding: 4px 12px;border: 1px solid #dc7e13;border-radius: 25px">10书券</view>
        </view>
          <view style="display: flex;justify-content: space-between;margin-top: 15px">
            <view style="color: #13ad84;font-size: 18px">●最大可获得</view>
            <view style="color: #dc7e13;background: #ffeed6;padding: 4px 12px;border: 1px solid #dc7e13;border-radius: 25px">10书券</view>
          </view>
          <view style="display: flex;justify-content: space-between;margin-top: 15px">
            <view style="color: #13ad84;font-size: 18px">●每日任务获得</view>
            <view style="color: #dc7e13;background: #ffeed6;padding: 4px 12px;border: 1px solid #dc7e13;border-radius: 25px">10书券</view>
          </view>
          <view style="border: 2px solid #f1e8e6;margin: 8px auto;color: #fff;border-radius: 20px;text-align: center;background: linear-gradient(to right, #ffb700, #ff3c00);;width: 150px;padding: 8px">领取任务</view>
        </view>

        <view style="padding: 12px 18px;border-radius: 8px;background: #fff;margin:32px 12px;">
          <view style="position: relative;top: -30px;left: -20px;background: #59d2ad;color: #fff;width: 160px;
          text-align: center;padding: 8px 12px;border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;font-size: 18px">初级阅读任务</view>
          <view style="display: flex;justify-content: center;align-items: center">
            <view style="color: #13ad84;background: #b2f1de;border-radius: 4px;box-shadow: inset 0 0 10px rgba(222,165,56,0.56);width: 70px;text-align: center;padding: 4px">
              <view style="font-size: 18px">30</view>
              <view style="font-size: 14px">周期</view>
            </view>
            <view style="height: 2px;width: 40px;background: #b2f1de"></view>
            <view style="color: #13ad84;background: #b2f1de;border-radius: 4px;box-shadow: inset 0 0 10px rgba(222, 165, 56, 0.7);width: 70px;text-align: center;padding: 4px">
              <view style="font-size: 18px">1</view>
              <view style="font-size: 14px">阅读值</view>
            </view>
            <view style="height: 2px;width: 40px;background: #b2f1de"></view>
            <view style="color: #13ad84;background: #b2f1de;border-radius: 4px;box-shadow: inset 0 0 10px rgba(222, 165, 56, 0.7);width: 70px;text-align: center;padding: 4px">
              <view style="font-size: 18px">10</view>
              <view style="font-size: 14px">最大持有</view>
            </view>
          </view>
          <view style="display: flex;justify-content: space-between;margin-top: 15px">
            <view style="color: #13ad84;font-size: 18px">●领取任务需要</view>
            <view style="color: #dc7e13;background: #ffeed6;padding: 4px 12px;border: 1px solid #dc7e13;border-radius: 25px">10书券</view>
          </view>
          <view style="display: flex;justify-content: space-between;margin-top: 15px">
            <view style="color: #13ad84;font-size: 18px">●最大可获得</view>
            <view style="color: #dc7e13;background: #ffeed6;padding: 4px 12px;border: 1px solid #dc7e13;border-radius: 25px">10书券</view>
          </view>
          <view style="display: flex;justify-content: space-between;margin-top: 15px">
            <view style="color: #13ad84;font-size: 18px">●每日任务获得</view>
            <view style="color: #dc7e13;background: #ffeed6;padding: 4px 12px;border: 1px solid #dc7e13;border-radius: 25px">10书券</view>
          </view>
          <view style="border: 2px solid #f1e8e6;margin: 8px auto;color: #fff;border-radius: 20px;text-align: center;background: linear-gradient(to right, #ffb700, #ff3c00);;width: 150px;padding: 8px">领取任务</view>
        </view>

        <view style="padding: 12px 18px;border-radius: 8px;background: #fff;margin:32px 12px;">
          <view style="position: relative;top: -30px;left: -20px;background: #59d2ad;color: #fff;width: 160px;
          text-align: center;padding: 8px 12px;border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;font-size: 18px">中级阅读任务</view>
          <view style="display: flex;justify-content: center;align-items: center">
            <view style="color: #13ad84;background: #b2f1de;border-radius: 4px;box-shadow: inset 0 0 10px rgba(222,165,56,0.56);width: 70px;text-align: center;padding: 4px">
              <view style="font-size: 18px">30</view>
              <view style="font-size: 14px">周期</view>
            </view>
            <view style="height: 2px;width: 40px;background: #b2f1de"></view>
            <view style="color: #13ad84;background: #b2f1de;border-radius: 4px;box-shadow: inset 0 0 10px rgba(222, 165, 56, 0.7);width: 70px;text-align: center;padding: 4px">
              <view style="font-size: 18px">1</view>
              <view style="font-size: 14px">阅读值</view>
            </view>
            <view style="height: 2px;width: 40px;background: #b2f1de"></view>
            <view style="color: #13ad84;background: #b2f1de;border-radius: 4px;box-shadow: inset 0 0 10px rgba(222, 165, 56, 0.7);width: 70px;text-align: center;padding: 4px">
              <view style="font-size: 18px">10</view>
              <view style="font-size: 14px">最大持有</view>
            </view>
          </view>
          <view style="display: flex;justify-content: space-between;margin-top: 15px">
            <view style="color: #13ad84;font-size: 18px">●领取任务需要</view>
            <view style="color: #dc7e13;background: #ffeed6;padding: 4px 12px;border: 1px solid #dc7e13;border-radius: 25px">10书券</view>
          </view>
          <view style="display: flex;justify-content: space-between;margin-top: 15px">
            <view style="color: #13ad84;font-size: 18px">●最大可获得</view>
            <view style="color: #dc7e13;background: #ffeed6;padding: 4px 12px;border: 1px solid #dc7e13;border-radius: 25px">10书券</view>
          </view>
          <view style="display: flex;justify-content: space-between;margin-top: 15px">
            <view style="color: #13ad84;font-size: 18px">●每日任务获得</view>
            <view style="color: #dc7e13;background: #ffeed6;padding: 4px 12px;border: 1px solid #dc7e13;border-radius: 25px">10书券</view>
          </view>
          <view style="border: 2px solid #f1e8e6;margin: 8px auto;color: #fff;border-radius: 20px;text-align: center;background: linear-gradient(to right, #ffb700, #ff3c00);;width: 150px;padding: 8px">领取任务</view>
        </view>

      </view>

    </view>

  </view>
</template>

<script>
export default {
  name: "plan",
  data() {
    return {
      tab: 1
    }
  },
  onLoad() {

  },
  onShow() {

  },
  methods:{

  },
}
</script>

<style scoped>
  .active{
    color: #1a9d48 !important;
    font-size: 18px;
  }
</style>
